<html>
	<head>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<meta charset="utf-8">
		<meta name="renderer" content=webkit>
		<!-- 引入vue -->
		<script src="../js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="../js/jQyery.js"></script>
		<script src="../js/switch_ale.js"></script>
		<script src="../js/layer/layer.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/element/element.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../js/element/element.css">
		<link rel="stylesheet" href="../css/main.css">
		<link rel="stylesheet" href="../css/maincontent.css">
		<link rel="stylesheet" href="../css/video.css" />


	</head>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
	<body>
		<!-- 弹层位置 -->
		
		<div id="vd_mask">	</div>	
		
		<div id="vd_alert">
			<em class="vd_ale_colse" onclick="$('#vd_alert').hide();$('#vd_mask').hide()"><img src="../img/x.png"></em>
			<p>是否设置当前角度为预置点？</p>
			<div class="vd_alebt">
				<button class="vd_ale_false" onclick="$('#vd_alert').hide();$('#vd_mask').hide()">取消</button>
				<button class="vd_ale_true">确认</button>
				
			</div>
		</div>
		
		
		<div class="index_main" id="app" v-on:click="hidediaolog" v-cloak>
			<div class="index_mainhead">
				<div class="imh_left">
					<img class="index_logo" src="../img/logowhite.png">
					<el-tooltip class="item" effect="light" content="折叠" placement="right" v-if="!isCollapse">
						<img class="index_action" src="../img/logonext.png" v-on:click="changemenu">
					</el-tooltip>

					<el-tooltip class="item" effect="light" content="展开" placement="right" v-if="isCollapse">
						<img class="index_action" src="../img/right.png" v-on:click="changemenu">
					</el-tooltip>

				</div>
				<div class="imh_right">
					<div class="right_notice" v-on:click.stop="shownoticedialog">
						<el-badge :value="12" :max="99" class="item">
							<img class="right_noticeimg" src="../img/jinbao.png">
						</el-badge>
						<div class="noticelist" v-if="shownotice">
							<div class="noticediv">
								<img src="../img/yiji.png">
								<span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
							</div>
							<div class="noticediv">
								<img src="../img/erji.png">
								<span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
							</div>
							<div class="noticediv">
								<img src="../img/sanji.png">
								<span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
							</div>
							<div class="noticediv">
								<img src="../img/yiji.png">
								<span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
							</div>
							<div class="noticediv">
								<img src="../img/erji.png">
								<span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
							</div>
							<div class="noticediv">
								<img src="../img/sanji.png">
								<span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
							</div>
							<div class="noticebottom">
								<span>点击查看更多</span>
							</div>
						</div>
					</div>
					<div class="title_rightdiv" v-on:click.stop="showlangdialog">
						<img :src="langinfo.img">
						<span style="margin-left: 0.1rem;color: #fff">{{langinfo.name}}</span>
						<img src="../img/xlwhite.png" style="margin-left: 0.05rem;">
					</div>
					<div class="head_line">

					</div>
					<div class="head_loginout">
						<img src="../img/tuichu.png">
					</div>
				</div>

				<div class="changelang" v-if="showlang" style="right: 0.14rem;top: 0.86rem">
					<template v-for="item in langlist">
						<div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
							<img :src="item.img">
							<span>{{item.name}}</span>
						</div>
					</template>

				</div>
			</div>
			<div class="index_maincontent">
				<div class="imc_left">
					<div class="imc_userinfo" v-on:click.stop="showuserinfoactiondialog" v-if="!isCollapse">
						<div class="userimg">
							<img src="../img/tx.png">
						</div>
						<div class="userinfo">
							<div class="usertitle">
								<span>智棚物联网</span>
							</div>
							<div class="userdesc">
								<span>管理员</span>
							</div>
						</div>

						<div class="userinfoaction" v-if="showuserinfoaction">
							<div class="actionimg">
								<img src="../img/sanjiao.png">
							</div>
							<div class="actionlist">
								<div class="actiondiv">
									<span>基本资料</span>
								</div>
								<div class="actiondiv">
									<span>修改密码</span>
								</div>
								<div class="actiondiv">
									<span>退出</span>
								</div>
							</div>
						</div>
					</div>
					<div class="indexmenu">
						<el-menu ref="menu" default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
						 :collapse="isCollapse" background-color="#1A2F70" text-color="#dfdfdf" :unique-opened="true"
						 :collapse-transition="false">
							<el-menu-item index="2" v-on:click="hidefarmlist">
								<i class="el-icon-s-home"></i>
								<span slot="title">首页</span>
							</el-menu-item>
							<el-submenu index="1">
								<template slot="title">
									<i class="el-icon-s-grid"></i>
									<span>农场列表</span>
								</template>
								<el-menu-item-group class="seconditem" style="background: #253C82">
									<el-menu-item index="1-1">选项1</el-menu-item>
									<el-menu-item index="1-2">选项2</el-menu-item>
									<el-menu-item index="1-3">选项3</el-menu-item>
									<el-submenu index="1-4">
										<template slot="title">选项4</template>
										<el-menu-item class="thirditem" index="1-4-1">选项1</el-menu-item>
									</el-submenu>
								</el-menu-item-group>




							</el-submenu>

							<el-menu-item index="3" v-on:click="hidefarmlist">
								<i class="el-icon-s-platform"></i>
								<span slot="title">智能场景</span>
							</el-menu-item>
							<el-menu-item index="4" v-on:click="hidefarmlist">
								<i class="el-icon-s-order"></i>
								<span slot="title">智棚服务</span>
							</el-menu-item>
						</el-menu>
					</div>

				</div>
				<div class="imc_right">
					<div class="imc_righthead">
						<span>首页</span>
					</div>
					<div class="mainright_content">
						<div class="fc_maindivhead">
							<div class="fchead_left">
								<div class="hoverdiv">
									<div class="fcleft_div fcleft_sy">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>首页</span></div>
											<div class="fcldl_desc"><span>home page</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/sy.png"></div>
										<img src="../img/xz.png" style="width: 0.31rem;position: absolute;
										top: -1px;right: 0;">
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(0, 180, 62);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>设备控制</span></div>
											<div class="fcldl_desc"><span>Equipment control</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/xmkz.png"></div>
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(100, 112, 232);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>系统报警</span></div>
											<div class="fcldl_desc"><span>System alarm</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/baojing.png"></div>
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(251, 139, 139);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>传感数据</span></div>
											<div class="fcldl_desc"><span>Sensing data</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/cgq.png"></div>
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(27, 140, 228);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>视频监控</span></div>
											<div class="fcldl_desc"><span>Video surveillance</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/spjk.png"></div>
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(236, 113, 71);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>参数设置</span></div>
											<div class="fcldl_desc"><span>Parameter setting</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/cssz.png"></div>
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(195, 74, 211);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>历史数据</span></div>
											<div class="fcldl_desc"><span>historical data</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/lssj.png"></div>
									</div>
								</div>
								<div class="hoverdiv">
									<div class="fcleft_div" style="background: rgb(66, 175, 248);">
										<div class="fcldiv_left">
											<div class="fcldl_title"><span>统计分析</span></div>
											<div class="fcldl_desc"><span>statistical analysis</span></div>
										</div>
										<div class="fcldiv_right"><img src="../img/tjfx.png"></div>
									</div>
								</div>
							</div>
							<div class="fchead_right">
								<div class="fcr_left">
									<div class="fcrl_top"><img src="../img/qing.png"></div>
									<div class="fcrl_bottom"><span>晴</span></div>
								</div>
								<div class="fcr_right">
									<div class="fcrr_top"><span>27°C-35°C</span></div>
									<div class="fcrr_bottom"><span>北京 2020-07-28</span> <span>风向:无持续风向</span> <span>风力:&lt;3级</span></div>
								</div>
							</div>
						</div>


						<div class="vd_box">
							<ul class="vd_list" v-if="videotype==2">
								<template v-for="item in 9">
									<li class="im100" @click="selectthis(item)" :class="{selectim100:item==selectindex}">
										<video src="../img/test.mp4"  controls="controls" ></video>
										<div class="mengdiv"></div>
									</li>
								</template>
							
							</ul>
							<ul class="vd_list" v-if="videotype==1">
								<template v-for="item in 4">
									<li class="im100" @click="selectthis(item)" :class="{selectim100:item==selectindex}">
										<video src="../img/test.mp4"  controls="controls" ></video>
										<div class="mengdiv"></div>
									</li>
								</template>
							
							</ul>
							<ul class="vd_list" v-if="videotype==0">
								<template v-for="item in 1">
									<li class="im100" @click="selectthis(item)" :class="{selectim100:item==selectindex}">
										<video src="../img/test.mp4"  controls="controls" ></video>
										<div class="mengdiv"></div>
									</li>
								</template>
							
							</ul>

							<div class="vd_control">
								<div class="vd_rtitle">
									<h2 class="vd_title">监控列表</h2>
									<el-dropdown trigger="click">
										<span class="el-dropdown-link">
											切换温室后门<i class="el-icon-arrow-down el-icon--right"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>选项一</el-dropdown-item>
											<el-dropdown-item>选项二</el-dropdown-item>
											<el-dropdown-item>选项三</el-dropdown-item>
											<el-dropdown-item>选项四</el-dropdown-item>
											<el-dropdown-item icon="el-icon-circle-check">选项五/带icon</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>

								</div>
								<div class="vd_rtitle">
									<h2 class="vd_title">设备列表</h2>
									<el-dropdown trigger="click">
										<span class="el-dropdown-link">
											切换温室后门<i class="el-icon-arrow-down el-icon--right"></i>
										</span>
										<el-dropdown-menu slot="dropdown">
											<el-dropdown-item>选项一</el-dropdown-item>
											<el-dropdown-item>选项二</el-dropdown-item>
											<el-dropdown-item>选项三</el-dropdown-item>
											<el-dropdown-item>选项四</el-dropdown-item>
											<el-dropdown-item icon="el-icon-circle-check">选项五/带icon</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>

								</div>
								<div class="vd_rtitle2">
									<h2 class="vd_title">清晰度</h2>
									<div class="switchdiv" style="float: right;" v-on:click="changenowtype()" :class="{openswitch:switchstatus,closeswitch:!switchstatus}">
										<!-- zhan kai jiu shi open shou qi jiushi close -->
										<div class="nostate">
											<span v-if="switchstatus">高清</span>
											<span v-if="!switchstatus" style="color:#A8A8A8">标清</span>
										</div>
									</div>
								</div>

								<div class="vd_direction">
									<h2 class="vd_title">云台控制</h2>
									<div class="vd_panel">
										<button class="vd_panel_1"><img src="../img/up.png"></button>
										<button class="vd_panel_2"><img src="../img/up.png"></button>
										<button class="vd_panel_3"><img src="../img/up.png"></button>
										<button class="vd_panel_4"><img src="../img/up.png"></button>
										<button class="vd_panel_5"><img src="../img/sxt.png"></button>
										<button class="vd_panel_6"><img src="../img/up.png"></button>
										<button class="vd_panel_7"><img src="../img/up.png"></button>
										<button class="vd_panel_8"><img src="../img/up.png"></button>
										<button class="vd_panel_9"><img src="../img/up.png"></button>
									</div>

									<div class="bigicont">
										<i class="el-icon-zoom-in"></i>
									</div>
									<div class="samllicont">
										<i class="el-icon-zoom-out"></i>
									</div>
								</div>

								<div class="vd_preset">
									<div class="vd_pretit">
										<h2 class="vd_title">预置点</h2>
										<button class="vd_del">删除</button>
										<button class="vd_set" onclick="$('#vd_alert').show();$('#vd_mask').show()">设置</button>
									</div>

									<div class="vd_postion">
										<span class="vd_bor1"><em class="active"></em>1</span>
										<span class="vd_bor1">2</span>
										<span class="vd_bor2">+</span>
										<span class="vd_bor2">+</span>
									</div>
								</div>									
									<div class="vd_blu">
										<div class="vd_bpic1 " :class="{select_blu:videotype==0}" v-on:click="settype(0)">
											
											<img  src="../img/vd_blupic_hover.png">
										</div>
										<div class="vd_bpic2" :class="{select_blu:videotype==1}" v-on:click="settype(1)">
											<img src="../img/vd_blupic2.png">
										</div>
										<div class="vd_bpic3" :class="{select_blu:videotype==2}" v-on:click="settype(2)">
											<img src="../img/vd_blupic3.png">
										</div>
									</div>
							</div>
					
							
						</div>
					</div>
					<div class="mainright_footer">
						<span>Copyright © 1996-2019 SINA Corporation All Rights Reserved</span>
					</div>
				</div>
			</div>

		</div>

	</body>

</html>


<script>
	var loginvue = new Vue({
		el: '#app',
		data() {
			return {
				langinfo: {
					name: "简体中文",
					img: '../img/cn.png'
				},
				showlang: false,
				shownotice: false,
				showuserinfoaction: false,
				isCollapse: false,
				langlist: [{
						img: '../img/cn.png',
						name: '简体中文'
					},
					{
						img: '../img/yy.png',
						name: 'English'
					},
					{
						img: '../img/yy.png',
						name: 'English'
					},
					{
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					}, {
						img: '../img/yy.png',
						name: 'English'
					},

				],

				switchstatus: false, //puan duan shi zhankai haishi shouqi de shuju



				videotype:2,
				selectindex:1,


			}
		},
		computed: {

		},
		created() {

		},
		mounted() {



		},
		methods: {
			changenowtype() { //dian jii shijian  
				this.switchstatus = !this.switchstatus;
			},
			showlangdialog() {
				this.showlang = !this.showlang;
				this.shownotice = false;
				this.showuserinfoaction = false
			},
			hidediaolog() {
				this.showlang = false;
				this.shownotice = false;
				this.showuserinfoaction = false
			},
			showuserinfoactiondialog() {
				this.showuserinfoaction = !this.showuserinfoaction;
				this.shownotice = false;
				this.showlang = false;
			},
			chosethis(item) {
				this.langinfo = item
				this.showlang = false;
			},
			shownoticedialog() {
				this.shownotice = !this.shownotice;
				this.showlang = false;
				this.showuserinfoaction = false


			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			changemenu() {
				this.isCollapse = !this.isCollapse
				if (this.isCollapse) {
					$(".el-submenu__title span").hide();
					$(".el-menu-item span").hide();
					$(".el-submenu__title i").eq(1).hide();
					$(".imc_left").css({
						"width": "auto",
						"min-width": "auto"
					})
					$(".indexmenu").css("height", "100%")

				} else {
					$(".imc_left").css({
						"width": "2.6rem",
						"min-width": "200px"
					})
					$(".indexmenu").css("height", "calc(100% - 0.96rem)")
				}
			},
			hidefarmlist() {
				this.$refs["menu"].close("1")
			},

			settype(type){
				this.videotype=type;
				this.selectindex=0;
				setTimeout(()=>{
					if(type==0){
						$(".im100").css("min-width","100%")
						$(".im100").css("height","6.3rem")
					}
					if(type==1){
						$(".im100").css("min-width","49%")
						$(".im100").css("height","3.15rem")
						$(".im100").css("max-width","49%")
					}
					if(type==2){
						$(".im100").css("min-width","33%")
						$(".im100").css("max-width","33.33%")
						$(".im100").css("height","2.1rem")
					}
				})
				
			},
			selectthis(index){
				this.selectindex=index;
			}

		}
	})
	$(document).on("click", function() {
		loginvue.hidediaolog();
	})
</script>
